<template>
  <el-card class="box-card" shadow="always">
    <div slot="header" class="clearfix">
      <span>注册</span>
    </div>

    <el-form :model="rigisterInfo" ref="rigister" :rules="rules">
      <el-form-item prop="roles">
          <el-select v-model="rigisterInfo.roles" filterable placeholder="请选择角色信息" style="width:320px">
            <el-option v-for="item in rigisterInfo.roleList" :value="item.rname" :key="item.rid"/>
          </el-select>
      </el-form-item>

      <el-form-item prop="userName">
        <el-input
          prefix-icon="el-icon-user"
          v-model="rigisterInfo.userName"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>

      <el-form-item prop="userPwd">
        <el-input
          prefix-icon="el-icon-lock"
          :type="pwdType"
          v-model="rigisterInfo.userPwd"
          placeholder="请输入密码"
          ><i slot="suffix" class="el-icon-view" @click="showPwd"></i
        ></el-input>
      </el-form-item>

      <el-form-item prop="phone">
        <el-input
          prefix-icon="el-icon-mobile-phone"
          v-model="rigisterInfo.phone"
          placeholder="请输入手机号(选填)"
          ></el-input>
      </el-form-item>

      <el-form-item prop="email">
        <el-input
          prefix-icon="el-icon-message"
          v-model="rigisterInfo.email"
          placeholder="请输入邮箱(选填)"
          ></el-input>
      </el-form-item>

      <el-form-item style="text-align: center">
        <el-button
          style="width: 40%"
          type="primary"
          @click="submitForm('rigister')"
          >注册</el-button
        >
        <el-button style="width: 40%" type="primary" @click="cancle"
          >取消</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>


<script>
export default {
  name: "Login",
  data() {
    return {
      rigisterInfo: {
        userName: "",
        userPwd: "",
        phone:"",
        email:"",
        roles:"",
        roleList:[]
      },
      pwdType: "password",

      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" },
        ],
        userPwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, message: "密码不能小于3位", trigger: "blur" },
        ],
      },
    };
  },
  created(){
    this.queryRoles();
  },
  methods: {
    queryRoles(){
      this.$http.get('roleList').then(res=>{
        this.rigisterInfo.roleList=res.data.result;
      });

    },
    //formName表示验证这个表单
    submitForm(formName) {
      console.log(this.rigisterInfo.roles)
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post(
          "register",
          this.rigisterInfo
        );

        if (res.meta.status == 400) {
          this.$message({
            message: "用户名已存在",
            type: "error",
          });
        }
        else if (res.meta.status == 401) {
          this.$message({
            message: "请选择角色身份",
            type: "error",
          });
        }
        else if(res.meta.status == 200){
          this.$message({
            message: "注册成功！",
            type: "success",
          });
          this.$router.replace("/main");
        }
        else{
          this.$message({
            message: "注册失败！",
            type: "error",
          });
        }
        
      });
    },
    // 显示隐藏密码
    showPwd() {
      this.pwdType === "password"
        ? (this.pwdType = "")
        : (this.pwdType = "password");
      let e = document.getElementsByClassName("el-icon-view")[0];
      this.pwdType == ""
        ? e.setAttribute("style", "color:#409EFF")
        : e.setAttribute("style", "color:#c0c4cc");
    },
    cancle() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.box-card {
  position: absolute;
  left: 0;
  right: 0;
  width: 360px;
  margin: 0 auto;
  border-top: 20px solid #409eff;
}

.clearfix {
  text-align: center;
  position: relative;
  top: 10px;
}
.clearfix > span {
  font-size: 27;
  color: #409eff;
}
</style>